import React from 'react';
import style from './style';
import util from '../../util';
import { Button } from 'sq-ui';
import cx from 'classnames';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { freezeGuide, deleteGuide, clearGuide, setStepGuide } from '../../actions/app.action'
import cookie from 'component-cookie'
import { updateToken } from '../../actions/util';

export
const GuideInfo = ({
  lineWidth,
  styles={},
  info,
  ...others,
}) => (
  <div style={{ position: 'absolute', left: '100%', bottom: '15px', marginLeft: '10px', ...styles }} {...others}>
    <div style={{ background: '#D1D5DC', width: `${lineWidth}px`, height: '1px' }}></div>
    <div style={{ position: 'absolute', left: '100%', marginTop: '-4px', width: '7px', height: '7px', borderRadius: '50%', background: '#D1D5DC' }}></div>
    <div style={{ position: 'absolute', left: '100%', width: '280px', color: '#fff', marginLeft: '10px', top: '100%', marginTop: '-8px', fontSize: '12px' }}>
      {
        info.map((v, i) => <p key={i}>{v}</p>)
      }
    </div>
  </div>
);

export 
const GuideBox = ({
  styles={},
  title,
  text,
}) => (
  <div className={style['next']} style={styles}>
    <h2>{title}</h2>
    {
      text.map((v,i)=> <p key={i}>{v}</p>)
    }
  </div>
);

export
const NextGuide = ({ str, styles={}, left, right, large, ...others }) => (
  <div>
    <div style={{...styles}}  className={cx(style['next-guide-wrapper'], {
       [style.left]: left,
       [style.right]: right,
       [style.small]: !large,
     })}>
      <button
        style={{margin: '0',padding: '0'}}
        className={style['next-guide']}
      >
        {str}
      </button>
    </div>
    <div style={{...styles}}  className={cx(style['next-guide-wrapper'], {
       [style.left]: left,
       [style.right]: right,
       [style.small]: !large,
     })}>
    </div>
  </div>
);

function Next(props) {
  const {
    name,
    descr,
    guide,
    btn,
    styles={},
  } = props;
  if (guide > 1) return null;
  return (
    <div className={style.next} style={{display: 'block', ...styles}}>
      <h2>{name}</h2>
      {
        descr.map((v,i) => {
          const [t, s] = v.split('#');
          const content = t || s;
          return (
            <p
              style={{
                marginTop: s == null ? '0px' : '10px',
              }}
              className={style.descr}
              key={i}>{content}</p>
          );
        })
      }
      {
        btn === false ? null : (
          <Button
            style={{ width: '60px', height: '22px', fontSize: '12px', position: 'absolute', right: '25px', bottom: '18px' }}
            blue
            label="下一步"
            onClick={() => props.actions.setStepGuide(2)}
          />
        )
      }
      <div className={style.circle}>
        <div>
          <div></div>
        </div>
      </div>
      <div className={style['circle-line']}></div>
    </div>
  );
}

export default
@connect(({ app }) => ({ app }), dispatch => ({actions: bindActionCreators({ setStepGuide, clearGuide, deleteGuide, freezeGuide }, dispatch)}))
class Guide extends React.Component {

  handleDelete() {
    this.props.actions.deleteGuide(res => {
      this.props.actions.clearGuide();
      const { accessToken, refreshToken } = res.data;
      // 更新cookie
      cookie('X-Access-Token', accessToken, { path: '/', maxage: 1000*60*60*24*30 });
      cookie('X-Refresh-Token', refreshToken, { path: '/', maxage: 1000*60*60*24*30 });
      // 更新本地tokenh
      updateToken({
        accessToken,
        refreshToken,
      });
      location.href = '/';
    });
  }

  renderGuide() {
    if (this.props.freeze !== 0) return null;
    const { data } = this.props;
    const { naviStep } = this.props.app;
    if (util.isNull(data)) return null;
    const length = data.length;

    return (
      <div className={style['step-layout']}>
        <ul className={style.steps}>
          {
            data.map((item, i) => (
              <li key={i} style={{width: `${100/length}%`}}>
                <div>
                  <div
                    onClick={() => {
                      if (i == naviStep) return;
                      item.handler && item.handler();
                    }}
                    className={cx(style.name, {
                      [style.active]: i == naviStep,
                      [style.current]: naviStep >= i
                    })}
                  >{ item.name }</div>
                </div>
                {
                  (naviStep == i && naviStep > 0 ) ? (
                    <Next
                      actions={this.props.actions}
                      {...this.props.app}
                      {...item}
                    />
                  ) : null
                }
              </li>
            ))
          }
        </ul>
        <div className={style['step-progess-bg']} style={{left: `${50/length}%`,right: `${50/length}%`}}></div>
        <div className={style['step-progess']} style={{left: `${50/length}%`,right: `${100*(length-(naviStep>length-1?length-1:naviStep)-0.5)/length }%`}}></div>
      </div>
    );
  }

  renderLine() {
    if (this.props.freeze !== 0) return null;
    const { data } = this.props;
    if (util.isNull(data)) return null;
    return (
      <ul className={style.line}>
        {
          data.map((item, i) => (
            <li style={{ width: i == 4 ? '84px': '56px'}} key={i}>
              <span className={style.point}></span>
              <span></span>
            </li>
          ))
        }
      </ul>
    );
  }

  renderFreeze() {
    if (this.props.freeze) {
      return (
        <div>
          <span style={{color: '#fff', marginRight: '40px', display: 'inline-block'}}>您已离开演示流程，演示暂停</span>
          <Button
            blue
            onClick={() => {
              const { handler } = this.props.data[this.props.app.naviStep || this.props.app.prevNaviStep];
              handler && handler();
            }}
            label="返回演示"
          />
        </div>
      );
    }
    return null;
  }

  render() {
    console.log(this.props.freeze);
    return (
      <div
        className={style.root}
        style={{
          position: 'fixed',
          bottom: '0px',
          backgroundColor: '#404953',
          height: '103px',
          width: '100%',
          zIndex: '6000',
          padding: 0,
        }}
      >
        <div>
          {
            this.renderGuide()
          }
          {
            this.renderFreeze()
          }
        </div>
        {
          this.props.freeze === 0 ? (
            <div style={{ position: 'relative' }}>
              {
                this.props.app.naviStep == 8 ? (
                  <Next
                    styles={{left: '25px', color: '#fff'}}
                    name="恭喜您，已完成入门!"
                    descr={["点击此按钮删除刚才创建的所有数据，进入贵公司的真实场景中开始使用吧！"]}
                    btn={false}
                  />
                ) : null
              }
              <button
                onClick={::this.handleDelete}
                className={cx(style['delete-demo'], {
                  [style.active]: this.props.app.naviStep == 8,
                })}
              >删除演示数据并开始使用</button>
            </div>
          ) : null
        }
      </div>
    );
  }
}
